import React from 'react';
import {
  StyleSheet,
  //Text,
  View,
  FlatList,
  TouchableOpacity,
  TouchableHighlight,
} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';
import CommonStyles from '../../common/styles';
import Request from '../../common/request';
import Config from '../../common/config';
import Toast from 'react-native-root-toast';

import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Text, List, ListItem } from 'native-base';

export default class ForumList extends React.Component {
  static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;
    console.log(params);
    return ({
      tabBarVisible: false,
      gesturesEnabled: false,
      headerTitle: (<Text>按{params.forumtaxonomy.name}选择</Text>),
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.pop()} style={{marginLeft: 15}}>
          <Icon name="close" size={26} />
        </TouchableOpacity>
      )
    })
  }

  state = {
    loading: false,
    page: 1,
    params: null,
    forums: [],
  }

  componentWillMount() {  
    console.log("willMount", this.props.navigation.state.params);
    this.setState({params: this.props.navigation.state.params});
  }

  componentDidMount() {
    this.setState({
      loading: true,
    }, () => {
      this.fetchForums();
    })
  }

  fetchForums() {
    Request.get(Config.api.forum, "taxonomy_key=" + this.state.params.forumtaxonomy.key).then((response) => {
      console.log(response);
      this.setState({
        forums: response.data.list,
        loading: false,
      });
    })
  }

  onRefresh() {
    console.log("onRefresh");
    if (this.state.loading) {
      console.log("loading");
      return;
    }
    this.setState({
      loading: true,
      page: 1,
    }, () => {
      this.fetchForums();
    })
  }

  list = [
    {"name": "明珠", "key": 1},
    {"name": "新悦", "key": 2},
    {"name": "桃源", "key": 3},
    {"name": "富临", "key": 4},
  ]

  gotoTopicList = (item) => {
    // console.log(item);
    this.props.navigation.navigate("TopicList", {id: 1});
  
  }

  renderItem = ({item, index}) => {
    console.log(item);
    return (
      <TouchableOpacity style={[styles.itemWrap]} onPress={() => this.gotoTopicList(999)}>
        <Text>{item.name}</Text>
        <Icon name="keyboard-arrow-right" size={16} />
      </TouchableOpacity>
     
    )
  }

  itemSeparator = () => {
    return (
      <View style={styles.itemSeparator}></View>
    )
  }

  goBack() {
    console.log("pop(2)");
    this.props.navigation.pop();
  }

  render() {
    return (
      <View style={CommonStyles.container}>
        <FlatList
          data={this.state.forums}
          renderItem={this.renderItem}
          refreshing={this.state.loading}
          onRefresh={() => this.onRefresh()}
          ItemSeparatorComponent={this.itemSeparator}
        />
      </View>
    );
  }

}

var styles = StyleSheet.create({
  forumItem: {
    justifyContent: "space-between",
  },
  pageTitle: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    marginTop: 10,
    marginBottom: 10
  },
  pagetTitleLeft: {
    alignSelf: "flex-start"
  },
  itemWrap: {
    marginTop: 10,
    marginBottom: 10,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between"
  },
  itemSeparator: {
    display: "flex",
    height: 1,
    backgroundColor: "#ddd"
  },
  arrow: {
    position: "absolute",
    right: 0
  }

})